<template>
    <view 
        v-if="$store.state.base.show_base.order_list_style==1" 
        @tap="open" 
        class="gui-margin-left gui-color-blue" 
        style="margin-right:-2rpx"
    >
        <view class="gui-color-blue">{{title}}</view>
    </view>

    <view 
        v-else 
        class="gui-margin-left gui-color-blue" 
        style="margin-right:-2rpx"
        @tap="open"
    >
        <button type="default" class="gui-color-blue" style="border: 1px solid white; background: none;">
            {{title}}
        </button>
    </view>

    <gui-modal ref="popup" :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" :title="title">
        <template v-slot:content>
            <view class="gui-margin gui-padding gui-bg-gray gui-border-b gui-border-radius">
                <input v-model="money" :placeholder="'请输入' + (placeholder?placeholder:title)" />
            </view>
        </template>

        <!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
        <template v-slot:btns>
            <view class="gui-padding" style="display: flex; justify-content: center;">
                <button type="default" @tap="comfirm" class="gui-button-mini gui-bg-blue gui-color-white" style="min-width: 200rpx; padding: 0 40rpx;">
                    确认
                </button>
            </view>
        </template>
    </gui-modal>
</template>

<script>
    export default {
        name: "hyb-price",
        props: {
            max: {
                type: Number,
                default: 0,
            },

            data: {
                type: Object,
                default: () => {
                    return {}
                },
            },

            title: {
                type: String,
                default: "金额",
            },

            placeholder: {
                type: String,
                default: "",
            }
        },
        data() {
            return {
                money: ""
            };
        },
        created() {},
        methods: {
            open() {
                this.$refs.popup.open();
            },
            comfirm() {
                let val = parseFloat(this.money);
                // if (isNaN(val) || val == 0) {
                // 	uni.showToast({
                // 		title: "输入错误",
                // 		icon: 'none'
                // 	})
                // } else 
                if (this.max == 0 && val < 0) {
                    uni.showToast({
                        title: "不能小于0",
                        icon: 'none'
                    })
                } else if (this.max > 0  && Math.abs(val) > this.max) {
                    uni.showToast({
                        title: "必须小于" + this.max,
                        icon: 'none'
                    })
                } else {
                    this.$refs.popup.close();
                    this.$emit("comfirm", this.data, val);
                }
            }
        }
    }
</script>

<style>
    .gui-cate-left {
        width: 200rpx;
    }

    .gui-cate-right {
        width: 520rpx;
        left: 230rpx;
    }

    .gui-cate-left-item {
        height: 100rpx;
        padding: 35rpx 0;
        font-size: 26rpx;
    }

    .gui-cate-left-item-title {
        line-height: 32rpx;
        font-size: 28rpx;
        border-left-width: 8rpx;
        text-align: center;
    }

    .gui-cate-left-current {
        border-color: #FF0036 !important;
        background-color: #F6F7F8;
        color: #FF0036;
        font-weight: bold;
    }

    .gui-cate-right-title {
        line-height: 80rpx;
    }

    .gui-cate-product-list {
        margin-bottom: 30rpx;
        margin-right: 25rpx;
    }

    .gui-cate-pimg {
        width: 150rpx;
    }

    .gui-cate-pbody {
        margin-left: 30rpx;
        width: 100rpx;
        flex: 1;
        padding-top: -20rpx;
    }

    .gui-cate-price {
        font-size: 32rpx;
        line-height: 60rpx;
    }

    .gui-grid-item {
        padding: 20rpx 0;
    }

    .gui-ic-image {

        margin-bottom: 10rpx;
    }

    .gui-list-image {
        width: 160rpx;
        height: 160rpx;
    }
</style>    